<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="element/element.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="element/element.css">
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: auto;
            background: url(images/lgbg.gif) no-repeat center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        .box {
            position:absolute;
            /*定位方式绝对定位absolute*/
            position: absolute;
            width: 680px;
            height: 380px;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
            opacity:0.93;
        }

        .box1 {
            float: left;
        }

        .box2{
            float: left;
            background-image: url(images/lgbg2.gif);
            height:380px;
            width:400px;
            padding:26px;
            box-sizing:border-box;
            overflow:auto;
        }

        .box2 h1{
            margin: 0 0 0 100px;
            color: #fff;
            letter-spacing: 2px;
            /*字符间的间距1px*/
        }

        .img {
            height: 380px;
            width:200px;
            background-image: url(images/log2.png);
        }

        .inputbox{  
            width: 100%;
            color: white;
        }

        .hrefbox{
            margin: 20px 0;
            width: 100%;
            color: white;
        }

        .login {
            text-align: center;
            border-radius:10px; 
            width:236px; 
            height: 36px;
            font-size:16px;
            color: black;
            letter-spacing: 1px;
            /*字符间的间距1px*/
            border:none;
            border-bottom: 1px solid #fff;
            outline:none;
        }

        .sex {
            /* margin: 0 0 0 43px; */
            zoom: 130%;
        }
        
        .btn {
            text-align: center;
            border:none;
            font-size: 16px;
            color:#fff;
            background: #03a9f4;
            height: 38px;
            width: 238px;
            cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/
            border-radius:10px; 
            outline:none;
        }

        .box2 a {
            margin: 0 0 0 105px;
            text-align: center;
            font-size: 16px;
            color: white;
        }

        .tip {
            margin-left: 10px;
            font-size: 12px;
            color: white;
        }

        .sexInfo {
            margin-left: 10px;
            font-size: 12px;
            color: white;
        }

        .select {
            height: 38px;   
            border-radius:10px; 
            outline:none;
            color: rgb(0, 0, 0);
        }

        .licenses {
            margin-left: 12px;
        }
    </style>
</head>
<body class="easyui-layout">
    <div id="wrap">
        <div class="box">
            <div class="box1">
                <img class="img" src="images/log2.png">
            </div>
            <div class="box2">
                <div>
                    <h1>中国工商银行</h1>
                    <div class="hrefbox">
                        <a href="login.html">已有账号？点击登录</a>
                    </div>
                    <el-form :model="user" :rules="rules" ref="user" label-width="56px">
                        <el-form-item prop="userName">
                            <div class="inputbox">
                                <input type="text" class="login" v-model="user.userName" placeholder="请输入您的姓名">
                            </div>
                        </el-form-item>
                        <el-form-item prop="idCard">
                            <div class="inputbox">
                                <input type="text" class="login" v-model="user.idCard" placeholder="请输入身份证号">
                            </div>
                        </el-form-item>
                        <el-form-item prop="sex">
                            <div class="inputbox">
                                <input type="radio" class="sex" name="sex" value="男" v-model="user.sex"><label class="sexInfo">男</label>
                                <input type="radio" class="sex" name="sex" value="女" v-model="user.sex"><label class="sexInfo">女</label>
                            </div>
                        </el-form-item>
                        <el-form-item prop="selectValue">
                            <select class="select" v-model="user.age">
                                <option value="">请选择年龄</option>
                                <option :value="item" v-for="(item, index) in 100" :key="index">{{item}}</option>
                            </select>
                            <select class="select licenses" v-model="user.licenses">
                                <option value="">请选择用户权限</option>
                                <option :value="item" v-for="(item, index) in licenses" :key="index">{{item}}</option>
                            </select>
                            <input type="hidden" v-model="user.selectValue">
                        </el-form-item>
                        <el-form-item prop="icbcBranchNumber">
                            <div class="inputbox">
                                <input type="text" class="login" v-model="user.icbcBranchNumber" placeholder="请输入工商分行号">
                            </div>
                        </el-form-item>
                        <el-form-item prop="accountNumber">
                            <div class="inputbox">
                                <input type="text" class="login" v-model="user.accountNumber" placeholder="请设置账号">
                            </div>
                        </el-form-item>
                        <el-form-item prop="password">
                            <div class="inputbox">
                                <input type="password" class="login" v-model="user.password" placeholder="请设置密码">
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="inputbox">     
                                <input type="button" class="btn" value="注册" @click="register('user')">
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#wrap",
            data: {
                licenses: ["用户问卷人员", "销售人员", "销售查询人员", "产品维护人员", "产品维护审核人员"],
                user: {
                    userName: "",
                    idCard: "",
                    sex: "男",
                    age: "",
                    license: "",
                    licenses: "",
                    icbcBranchNumber: "",
                    accountNumber: "",
                    password: "",
                    selectValue: ""
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '请输入 2 到 5 个字符的姓名', trigger: 'blur' }
                    ],
                    idCard: [
                        { required: true, message: '请输入您的身份证号', trigger: 'blur' },
                        { min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur' }
                    ],
                    selectValue: [
                        { pattern: /^\d+.+$/, required: true, message: '请选择年龄和用户权限', trigger: 'blur' }
                    ],
                    icbcBranchNumber: [
                        { required: true, message: '请输入您的工商银行分行号', trigger: 'blur' },
                        { pattern: /^\d{1,5}$/, min: 1, max: 5, message: '请输入 1 到 5 个数字', trigger: 'blur' }
                    ],
                    accountNumber: [
                        { required: true, message: '请设置您的账号', trigger: 'blur' },
                        { min: 6, max: 11, message: '请输入 6 到 11 个字符的账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请设置您的密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '请输入 6 到 16 个字符的密码', trigger: 'blur' }
                    ],
                },
            },
            watch: {
                'user.age': {
                    handler() {
                        this.user.selectValue = this.user.age + this.user.licenses;
                    }
                },
                'user.licenses': {
                    handler() {
                        this.user.selectValue = this.user.age + this.user.licenses;
                    }
                },
            },
            methods: {
                register(formName){
                    this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var that = this;
                        that.user.license = that.getArrayIndex(that.licenses, that.user.licenses);
                        let user = JSON.stringify(that.user);
                        axios.post('http://localhost:8888/formssi/user/register', user, {
                            headers: {
                                "Content-Type": "application/json;charset=utf-8"  //头部信息
                            }
                        }
                        ).then(function (response) {
                            if(response.data.success == 1){
                                that.$message({
                                    message: '注册成功',
                                    type: 'success',
                                });
                                setTimeout(() =>{
                                    location.href = 'login.html';
                                },2000);
                            }
                        }).catch(function(error){
                            console.log(error);
                            that.$message({
                                message: '账号或密码错误，请重新输入！',
                                type: 'warning'
                            });
                        });
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                    });
                },
                getArrayIndex(arr, obj) {
                    var i = arr.length;
                    while (i--) {
                        if (arr[i] === obj) {
                            return i;
                        }
                    }
                    return false;
                }
            }
        });
    </script>
</body>
</html>